<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .wrap{
      height: 400px;
      width: 400px;
      border: 1px solid #ddd;
      position: relative;
      margin: 0 auto;
    }
    #upload{
      height: 400px;
      width: 400px;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      z-index: 9;
    }
    img{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 6;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <input type="file"  id="upload" accept=".jpg, .jpeg, .png">
    <img src="" alt=""  id="img">
  </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  const ipt = document.querySelector('input')
  const img = document.querySelector('img')
  ipt.addEventListener('change',function(e){
    console.log(e.target.files)
// FileList {0: File, length: 1}
// 0: File {name: "1.jpg", lastModified: 1608021913676, lastModifiedDate: Tue Dec 15 2020 16:45:13 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 17194, …}
// length: 1
const file = Array.from(e.target.files)
console.log(file)
const formdata = new FormData()
formdata.append('file',file[0])
// 这里传入的是一个对象
axios.post('http://linweiqin.cn:8001/v1/addimg/avatar',formdata)
.then((res)=>{
  console.log(res)
  src = 'http://linweiqin.cn:8001/img/' +res.data.image_path
  img.setAttribute('src',src)
})
  })
</script>
</html>
